{{extend "tutorial_layout.html"}}

{{block title}}{{super}} - {{=object.title}}{{end}}

{{block content_main}}
{{use "jquery",ui=True}}
{{link "tutorials/jquery.liveflex.Tree.js"}}
{{use "json2"}}

<style type="text/css">
.over{outline:solid 1px #afa}
.on{border:solid 1px green;}
.below{border-bottom:solid 2px #f00;}
.below span{}
.above{border-top:solid 2px #f00;}
.tree_hover{background:#ccc}
.ui-droppable {cursor:move;}
</style>

    <ul class="breadcrumb">
      <li>
        <a href="/tutorial">返回</a> <span class="divider">/</span>
      </li>
      <li>
        <a href="/tutorial/read/{{=object.id}}">{{=object.title}}</a> <span class="divider">/</span>
      </li>
      <li class="active">
        目录
      </li>
    </ul>

    <div>
        {{if object.authors.has(request.user) or has_role(request.user, 'superuser'):}}
        <a href="/tutorial/add_chapter/{{=object.id}}" class="btn btn-primary"><i class="icon icon-plus icon-white"></i>増加新的章节</a>
        <a href="/tutorial/edit/{{=object.id}}" class="btn btn-success"><i class="icon icon-edit icon-white"></i>修改教程信息</a>
        <a href="/tutorial/delete/{{=object.id}}" class="btn btn-danger" onclick="return confirm('{{=_("您确定要删除此教程吗?")}}');"><i class="icon icon-remove icon-white"></i>删除教程</a>
        <script>
            function process_titles(objs, parent, num){
                var i=1;
                var c;
                for(var j=0; j<objs.length; j++){
                    if (objs[j].parent == parent){
                        c = '' + num + i;
                        $('li[data-id='+objs[j].id+']').find('span.chapter-num').text(c);
                        process_titles(objs, objs[j].id, c+'.');
                        i++;
                    }
                }
            }
            $(function(){
                //处理标题排序
                var tree = $('#titles-list').liveflex_treeview({
                    handle:'span.chapter-num',
                    dirSelector:'li.parent',
                    itemMoved: function(csv){
                        //处理标题的序号
                        var data = tree.data("liveflex.treeview").parseTree();
                        process_titles(data, 0, '');
                        $.ajax({
                            type:'POST',
                            dateType:'json',
                            url: '/tutorial/change_titles_order/{{=object.id}}',
                            data:{data:JSON.stringify(data)},
                            traditional:true,
                            success:function(data){
                                if(data.success){
                                    show_message('保存成功');
                                }else
                                    window.location.reload();
                            }
                    	});
                    }
                });
                //$('.chapter-list').disableSelection();
                //处理标题处理按钮
                $('.chapter-item').hover(
                    function(){
                        $(this).find('div.chapter-buttons').slideDown();
                    },
                    function(){
                        $(this).find('div.chapter-buttons').slideUp();
                    }
                );
                
            });
        </script>
        {{pass}}
    </div>
    
    {{def disp(parent, num, ul=False):}}
        {{flag = False}}
        {{for num, row in objects(parent, num):}}
            {{if ul and not flag:}}
                <ul class="unstyled">
                {{flag=True}}
            {{pass}}
            <li data-id="{{=row.id}}" data-order="{{=row.order}}">
                <div class="chapter-item">
                    <span class="chapter-num ui-droppable">{{=num}}</span>&nbsp;&nbsp;
                    {{if 'debug' in request.GET:}}
                    <span>[id={{=row.id}}, order={{=row.order}}]</span>
                    {{pass}}
                    <a href="/tutorial/view_chapter/{{=row.id}}" class="chapter-title" id="info-{{=row.id}}">{{=row.title}}</a>
                    [<span class="small gray">字数:{{=row.chars_count}}/评论数:{{=row.comments_count}}/访问次数:{{=row.hits}}</span>]
                    {{if row.render == '1':}}<i class="icon-file" title="文章"></i>{{else:}}<i class="icon-film" title="幻灯"></i>{{pass}}
                    {{from datetime import timedelta}}
                    {{from uliweb.utils import date}}
                    {{if (date.to_datetime(row.modified_date)+timedelta(settings.get_var('TUTORIALS/new_diff_days')))>=date.now():}}
                        <img src="/static/tutorials/new.png"/>
                    {{pass}}
                    <script>
                        $(function(){
                            var txt = (
                            '<div class="chapter_tip">'
                            + '<img src="{{=functions.get_user_image(row.modified_user, size=50)}}" align="top"/>'
                            + '<ul class="unstyled">'
                            +   '<li><span class="tip-label">更新人</span>:{{=unicode(row.modified_user)}}</li>'
                            +   '<li><span class="tip-label">更新于</span>:{{=get_date(row.modified_date)}}</li>'
//                            +   '<li><span class="tip-label">字数</span>:{{=row.chars_count}}</li>'
                            +   '<li><span class="tip-label">评论数</span>:{{=row.comments_count}}</li>'
                            + '</ul>'
                            + '</div>');
                            $('#info-{{=row.id}}').popover({
                                placement:'right',
                                title:'章节信息',
                                content:txt,
                                html:true,
                                trigger:'hover'
                            });
                        });
                    </script>
                    {{if object.authors.has(request.user) or has_role(request.user, 'superuser'):}}
                    <div class="chapter-buttons" style="display:none;">
                        <a href="/tutorial/add_chapter/{{=object.id}}?parent={{=row.id}}"><i class="icon icon-plus"></i>増加子章节</a>
                        <a href="/tutorial/edit_chapter/{{=row.id}}"><i class="icon icon-edit"></i>编辑</a>
                        <a href="/tutorial/delete_chapter/{{=row.id}}"><i class="icon icon-remove"></i>删除</a>
                    </div>
                    {{pass}}
                </div>
                {{disp(row.id, num+'.', True)}}
            </li>
        {{pass}}
        {{if ul and flag:}}
            </ul>
        {{pass}}
    {{pass}}
    <ul class="unstyled chapter-list" style="margin-top:18px;" id="titles-list">
    {{disp(None, '')}}
    </ul>
{{end}}
